<template>
	<view style="margin: 1vmax;">
		<view style="display: flex;gap: 10px;align-items:flex-end;">
			<view
				style="border-left: 10px solid #1890FF;height: 80%;width: fit-content;padding-left: 0.8vmax;font-weight: bold;" :style="{fontSize:titleFontSize}">
				{{title}}
			</view>
			<!-- <view style="font-size: 2vmax;line-height: 2vmax;">{{title}}</view> -->
			<view style="font-size: 0.7rem;opacity: 0.3;font-style: italic;">{{subTitle}}</view>
		</view>
		<view style="width: 100%;margin-top: 1vmax;">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "titleBox"
		, data() {
			return {

			};
		}
		, props: ["title", "subTitle","titleFontSize"]
	}
</script>

<style>

</style>
